<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElTag, ElImage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import * as admin from '@/api/admin.js'
import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();

// 产品列表数据
const products = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const updateModal = ref(false);
const addModal = ref(false);

const search_title = ref('');
const search_description = ref('');

const updateData = ref({
  id: '',
  name: '',
  description: '',
  price: '',
  stock: 0,
  img: ''
})

const addData = ref({
  name: '',
  description: '',
  price: '',
  stock: 0,
  img: ''
})

const showDialog = (row) => {
  updateData.value.id = row.id;
  updateData.value.name = row.name;
  updateData.value.description = row.description;
  updateData.value.price = row.price;
  updateData.value.stock = row.stock;
  updateData.value.img = row.img;
}

// 模拟获取数据
const fetchProducts = async() => {
  const param = {
      currentPage: currentPage.value,
      name: search_title.value,
      description: search_description.value,
  }
  console.log(param);
  const res = await admin.findProduct(param)
  products.value = res.data;
  total.value = res.total;
};

// 搜索产品
const searchProducts = () => {
  fetchProducts();
};

// 删除产品
const deleteProduct = (id) => {
  const param = {
    id: id
  }
  ElMessageBox.confirm('确认删除该产品？', '提示', { type: 'warning' })
    .then(async () => {
      const res = await admin.delProduct(param)
      if (res.code == 0) {
        fetchProducts();
      }
      ElMessage.success('删除成功');
    })
    .catch(() => ElMessage.info('取消删除'));
};

// 修改产品
const editMethod = async(id) => {
  const res = await admin.updateProduct(updateData.value)
  if (res.code == 0) {
    fetchProducts();
  }
  ElMessage.success('修改成功');
  updateModal.value = false;
};


const addMethod = async()=>{
  const res = await admin.addProduct(addData.value)
  if (res.code == 0) {
    fetchProducts();
  }
  ElMessage.success('增加成功');
  addModal.value = false;
}

// 分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchProducts();
};

// 初始化加载数据
onMounted(() => {
  fetchProducts();
});

//上传成功的回调函数
const uploadSuccess = (result)=>{
  updateData.value.img = result.data;
  addData.value.img = result.data;
}
</script>

<template>
  <div class="product-page">
    <!-- 搜索框 -->
    <el-card class="search-box">
      <el-form :inline="true">
        <el-form-item label="产品名称">
          <el-input v-model="search_title" placeholder="请输入产品名称" clearable />
        </el-form-item>
        <el-form-item label="产品描述">
          <el-input v-model="search_description" placeholder="请输入产品描述" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchProducts">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 添加产品按钮 -->
    <div class="add-box">
      <el-button type="success" @click="addModal=true">➕ 添加产品</el-button>
    </div>

    <!-- 产品列表 -->
    <el-card>
      <el-table :data="products" border style="width: 100%">
        <!-- <el-table-column prop="id" label="ID" width="60" /> -->
        <el-table-column prop="name" label="产品名称" width="180" />
        <el-table-column prop="description" label="产品描述" />
        <el-table-column prop="price" label="价格" width="120" />
        <el-table-column prop="stock" label="库存" width="120" />
        <el-table-column label="图片" width="120">
          
          <template #default="{ row }">
            <el-image :src="row.img" fit="contain" width="60" height="60" />
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="150" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="showDialog(row),updateModal=true">修改</el-button>
            <el-button type="danger" size="small" @click="deleteProduct(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="handlePageChange"
      />
    </div>


<el-drawer
  v-model="updateModal"
  title="修改商品信息"
  direction="rtl"
  class="custom-drawer"
  size="40%"
>
  <div class="demo-drawer__content">
    <el-form 
      ref="updateFormRef" 
      :model="updateData" 
      :rules="rules" 
      label-width="100px"
      style="padding: 10px 20px"
    >
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="updateData.name" placeholder="请输入商品名称" clearable />
      </el-form-item>

      <el-form-item label="商品描述" prop="description">
        <el-input 
          v-model="updateData.description" 
          type="textarea" 
          placeholder="请输入商品描述"
          maxlength="200"
          show-word-limit
          clearable
        />
      </el-form-item>

      <el-form-item label="价格 (¥)" prop="price">
        <el-input-number 
          v-model="updateData.price" 
          :min="0" 
          :precision="2"
          style="width: 100%"
        />
      </el-form-item>

      <el-form-item label="库存数量" prop="stock">
        <el-input-number 
          v-model="updateData.stock" 
          :min="0" 
          style="width: 100%"
        />
      </el-form-item>

      <el-form-item label="商品图片" prop="img">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/upload/image"
          name="file"
          :show-file-list="false"
          :on-success="uploadSuccess"
        >
        <img v-if="updateData.img" :src="updateData.img" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>

    </el-form>

    <div class="demo-drawer__footer">
      <el-button @click="updateModal = false">取消</el-button>
      <el-button type="primary" :loading="loading" @click="editMethod">提交</el-button>
    </div>
  </div>
</el-drawer>

<el-dialog 
  v-model="addModal" 
  title="添加商品" 
  width="40%" 
  center 
  class="custom-dialog"
  >
  <el-form 
    ref="addFormRef"
    :model="addData" 
    :rules="rules"
    label-width="100px" 
    style="padding: 10px 20px"
  >
    <el-form-item label="商品名称" prop="name">
      <el-input v-model="addData.name" placeholder="请输入商品名称" clearable />
    </el-form-item>

    <el-form-item label="商品描述" prop="description">
      <el-input 
        v-model="addData.description" 
        type="textarea"
        placeholder="请输入商品描述"
        maxlength="200"
        show-word-limit
        clearable
      />
    </el-form-item>

    <el-form-item label="价格 (¥)" prop="price">
      <el-input-number 
        v-model="addData.price" 
        :min="0" 
        :precision="2"
        style="width: 100%"
      />
    </el-form-item>

    <el-form-item label="库存数量" prop="stock">
      <el-input-number 
        v-model="addData.stock" 
        :min="0" 
        style="width: 100%"
      />
    </el-form-item>

    <el-form-item label="商品图片" prop="img">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/upload/image"
          name="file"
          :show-file-list="false"
          :on-success="uploadSuccess"
        >
        <img v-if="addData.img" :src="addData.img" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
  </el-form>

  <template #footer>
    <span class="dialog-footer">
      <el-button @click="addModal = false">取消</el-button>
      <el-button 
        type="primary" 
        @click="addMethod"
      >
        提交
      </el-button>
    </span>
  </template>
</el-dialog>

  </div>
</template>

<style scoped>
.product-page {
  padding: 20px;
  background: #f4f5f7;
  border-radius: 8px;
}

/* 搜索框 */
.search-box {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

/* 添加按钮 */
.add-box {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
}

/* 产品表格 */
.el-table {
  background: white;
  border-radius: 8px;
}

/* 图片 */
.el-image {
  border-radius: 6px;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
</style>
